<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>包含验证功能的简单表单</title>
</head>
<body>
<form action="" name="form1">
    Please enter the following details:
    <p><label for="txtName">Name: <input id="txtName" type="text" name="txtName"></label></p>
    <p><label for="txtAge">Age: <input id="txtAge" type="text" name="txtAge" size="3" maxlength="3"></label></p>
    <p><input type="button" name="btnCheckForm" value="Check details"></p>
</form>
<script>
    var myForm = document.form1;

    function btnCheckFormClick(e) {
        var txtName = myForm.txtName;
        var txtAge = myForm.txtAge;
        if (txtAge.value == '' || txtName.value == '') {
            alert('Please complete all of the form');
            if (txtName.value == '') {
                txtName.focus();
            } else {
                txtAge.focus();
            }
        } else {
            alert('Thanks for completing the form ' + txtName.value);
        }
    }

    function txtAgeBlur(e) {
        var target = e.target;
        if (isNaN(target.value)) {
            alert('Please enter a valid age');
            target.focus();
            target.select();
        }
    }

    function txtNameChange(e) {
        alert('Hi ' + e.target.value);
    }

    myForm.txtName.addEventListener('change', txtNameChange);
    myForm.txtAge.addEventListener('blur', txtAgeBlur);
    myForm.btnCheckForm.addEventListener('click', btnCheckFormClick);
</script>
</body>
</html>